<template>
  <div class="aside">
    <el-collapse v-model="activeNames">
      <el-collapse-item
        v-for="(item, idx) in menuList"
        :key="item.id"
        :name="item.id"
      >
        <template slot="title">
          <div :class="['aside-title', 'title' + idx]">
            <i :class="['title-icon', item.icon]"></i>{{ item.name }}
          </div>
        </template>
        <div class="cont">
          <ul>
            <li
              class="item"
              v-for="v in item.fileList"
              :key="v.id"
              @click="handleClick(item, v)"
              >{{ v.name }}</li
            >
            <li class="empty" v-if="item.fileList.length == 0">暂无数据</li>
          </ul>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeNames: [],
      menuList: [
        {
          id: 0,
          name: '视频',
          icon: 'el-icon-video-play',
          type: 1,
          fileList: [],
        },
        {
          id: 1,
          name: '课件',
          icon: 'el-icon-files',
          type: 2,
          fileList: [],
        },
        {
          id: 2,
          name: '推送资料',
          icon: 'el-icon-download',
          type: 3,
          fileList: [],
        },
        {
          id: 3,
          name: '附件下载',
          icon: 'el-icon-download',
          type: 4,
          fileList: [],
        },
      ],
    }
  },
  props: ['knowledgeList'],
  watch: {
    knowledgeList: {
      immediate: true,
      handler(arr) {
        if (arr && arr.length > 0) {
          let { sysKnowledgeFilesList } = arr[0]
          this.setData(sysKnowledgeFilesList)
        }
      },
      deep: true,
    },
  },
  mounted() {},
  methods: {
    // 设置数据
    setData(arr) {
      this.menuList = this.$options.data().menuList
      arr.forEach((v) => {
        let { type } = v
        if (type == 'mp4') {
          this.formatData(v, 0)
        } else if (
          type == 'pdf' ||
          type == 'doc' ||
          type == 'docx' ||
          type == 'ppt' ||
          type == 'pptx' ||
          type == 'xls' ||
          type == 'xlsx'
        ) {
          this.formatData(v, 1)
        } else {
          this.formatData(v, 2)
        }
      })
    },
    // 格式化数据
    formatData(row, idx) {
      let { id, name, sysAttachment } = row
      let obj = {
        id,
        name,
        url: sysAttachment ? sysAttachment.httpUrl : '',
      }
      this.menuList[idx].fileList.push(obj)
    },
    handleClick(item, v) {
      this.$bus.$emit('changeResource', item.type, v)
    },
  },
}
</script>
<style scoped lang="scss">
.aside {
  padding-top: 20px;
  .aside-title {
    .title-icon {
      margin: 0 10px;
      background: #e6a23c;
      padding: 5px;
      font-size: 16px;
      border-radius: 4px;
    }
    &.title0 {
      .title-icon {
        background: #409eff;
      }
    }
    &.title1 {
      .title-icon {
        background: #f60;
      }
    }
  }
  .cont {
    color: #fff;
    padding: 10px 0;
    box-sizing: border-box;
    background: #333;
    ul {
      li {
        padding: 10px 10px 10px 45px;
        // height: 32px;
        line-height: 22px;
        cursor: pointer;
        // text-indent: 35px;
        transition: all 0.3s;
        border-bottom: 1px solid #222;
        &:hover {
          color: #409eff;
        }
        &:last-child {
          border-bottom: 0 none;
        }
        &.empty {
          color: #999;
          cursor: not-allowed;
        }
      }
    }
  }
}
</style>
<style scoped>
.aside >>> .el-collapse {
  border: 0 none;
}
.aside >>> .el-collapse-item__header {
  background: transparent;
  color: #fff;
  border: 0 none;
}
.aside >>> .el-collapse-item__wrap {
  background: transparent;
  color: #fff;
  border: 0 none;
}
</style>